<template>
  <div class="app-container calendar-list-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input clearable  style="width: 200px;" placeholder="商户号" v-model="listQuery.merchantId"></el-input>
      <el-input clearable  style="width: 200px;" placeholder="商品编号" v-model="listQuery.goodsId"></el-input>
      <el-input clearable  style="width: 200px;" placeholder="支付订单编号" v-model="listQuery.payOrderNo"></el-input>
      <el-select class="filter-item" v-model="listQuery.province" placeholder="请选择省份">
          <el-option v-for="item in  provinceList" :key="item" :label="item.name" :value="item.areaCode"> </el-option>
        </el-select>
      <el-select v-model="listQuery.status" placeholder="订单状态" clearable="">
            <el-option label="支付成功" value="00"> </el-option>
            <el-option label="支付失败" value="01"> </el-option>
            <el-option label="待支付" value="02"> </el-option>
            <el-option label="支付中" value="03"> </el-option>
      </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查询</el-button>
      <el-button class="filter-item" type="primary" v-waves  @click="handleDownload">导出</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>

      <el-table-column align="center" label="平台编号" width="200" prop="platformId">
      </el-table-column>
      <el-table-column align="center" label="商户号" width="200" prop="merchantId">
      </el-table-column>
      <!-- <el-table-column align="center" label="用户编号" width="200" prop="customerId">
      </el-table-column> -->
      <el-table-column align="center" label="商品编号" width="200" prop="goodsId">
      </el-table-column>
      <el-table-column align="center" label="支付订单编号" width="200" prop="payOrderNo">
      </el-table-column>
      <el-table-column align="center" label="金额" width="200" prop="txAmt">
      </el-table-column>
      <el-table-column align="center" label="支付状态" width="200">
          <template slot-scope="scope">
              <span v-if="scope.row.status == '00'">支付成功</span>
              <span v-if="scope.row.status == '01'">支付失败</span>
              <span v-if="scope.row.status == '02'">待支付</span>
              <span v-if="scope.row.status == '03'">支付中</span>
          </template>
      </el-table-column>
      <el-table-column align="center" label="时间" width="200" prop="payTime">
      </el-table-column>
      <el-table-column align="center" label="用户openid" width="350" prop="openId">
      </el-table-column>
      <el-table-column align="center" label="微信昵称" width="350" prop="nickName">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
        :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-tooltip placement="top" content="返回顶部">
      <back-to-top :visibilityHeight="100" ></back-to-top>
    </el-tooltip>
  </div>
</template>

<style>
  .table-expand {
    font-size: 0;
  }
  .table-expand label {
    width: 100px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
  }
  .gallery {
    width: 80px;
    margin-right: 10px;
  }
</style>

<script>
import { allOrder } from '@/api/biz/qr/order/index'
import BackToTop from '@/components/BackToTop'
import { getProvince } from '@/api/admin/area/index'
import { mapGetters } from 'vuex'
import waves from '@/directive/waves' // 水波纹指令
export default {
  name: 'orderList',
  directives: {
    waves
  },
  components: { BackToTop },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        platformId: '',
        merchantId: '',
        goodsId: '',
        payOrderNo: '',
        status: '',
        province: '',
        city: ''
      },
      downloadLoading: false,
      provinceList: [],
      cityList: []
    }
  },
  computed: {
    ...mapGetters([
      'elements',
      'name',
      'platformId'
    ])
  },
  created() {
    this.getList()
    this.getProvinces()
  },
  methods: {

    getProvinces() {
      var str = {}
      str.layer = 1
      getProvince(str).then(response => {
        this.provinceList = response.data
      })
    },

    getCitys() {
      var str = {}
      str.layer = 2
      getProvince(str).then(response => {
        this.cityList = response.data
      })
    },
    getList() {
      this.listLoading = true
      this.listQuery.platformId = this.platformId
      allOrder(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['平台编号', '商户账号', '商品编号', '支付订单号', '金额', '状态', '支付时间', '用户openid', '微信昵称']
        const filterVal = ['platformId', 'merchantId', 'goodsId', 'payOrderNo', 'txAmt', 'txStatus', 'payTime', 'openId', 'nickName']
        excel.export_json_to_excel2(tHeader, this.list, filterVal, '订单信息')
        this.downloadLoading = false
      })
    }
  }
}
</script>
